import { PackageManagerTabs } from "../../src/theme/PackageManagerTabs";

# Svelte

Create a `Svelte` project based on `Farm`.

`Farm` provides two approaches to support creating `Svelte` projects: 
- Use the `create-farm` scaffold to create a scaffold project
- You can manually create a `Svelte` project following the current documentation

### Creating a Svelte Project

<PackageManagerTabs command="npm create farm@latest" />

Select `Svelte` template in `Select Framework`

:::warning Svelte
For `Svelte` support, `Farm` recommends using `Vite` plugins.
:::

```javascript title="farm.config.ts"
import { defineConfig } from '@farmfe/core'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  vitePlugins: [svelte()],
})

```

```javascript title="svelte.config.ts"
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

export default {
  preprocess: vitePreprocess(),
}
```
If you want to start DevServer

<PackageManagerTabs command="pnpm dev" />

If you need to run the build production environment product command

<PackageManagerTabs command="pnpm build" />

If you need to preview your build product

<PackageManagerTabs command="pnpm preview" />

For more example details: [Svelte Example](https://github.com/farm-fe/farm/tree/main/examples/vite-adapter-svelte)
